{% extends "base.html" %}

{% block cssstyle %}
    <style>
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
            background-color: #fff;
            /*transition:width 2s;
            -webkit-transition:width 2s;*/
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            border-radius: 6px;
            background-color: #fff;
        }

        ::-webkit-scrollbar-thumb {
            height: 60px;
            border-radius: 6px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
            background-color: #eee;
        }

        /*::-webkit-scrollbar:hover {
            width: 15px;
        }*/

        ::-webkit-scrollbar-thumb:hover {
            background-color: #ccc;
        }

    </style>
{% endblock %}

{% block content %}
    <!-- DATA TABLE-->
    <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--h3 class="title-5 m-b-35"></h3-->
                    <div class="table-data__tool">
                        <div class="table-data__tool-left">
                            <div class="rs-select2--light rs-select2--md">
                                <select id="source-select" class="js-select2" name="property">
                                    {% for source in source_list %}
                                        <option {% if selected_source == source %} selected="selected" {% endif %} value="{{ source }}">{{ source }}</option>
                                    {% endfor %}
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <div class="rs-select2--light rs-select2--md">
                                <select id="date-select" class="js-select2" name="time">
                                    {% for date in date_list %}
                                        <option {% if selected_date == date %} selected="selected" {% endif %} value="{{ date }}">{{ date }}</option>
                                    {% endfor %}
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <button class="au-btn-filter" onclick="filter();">
                                <i class="zmdi zmdi-filter-list"></i>筛选</button>
                        </div>
                        <div class="table-data__tool-right">
                            <button class="au-btn au-btn-icon au-btn--blue au-btn--small">导出</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                {% for pool, records in pool_data.items %}
                    <div class="col-lg-4">
                        <!-- TOP CAMPAIGN-->
                        <div class="statistic-chart-1" style="padding-right: 10px;">
                            <h3 class="title-3 m-b-30">{{ pool }}</h3>
                            <hr>
                            <div class="table-responsive table-data" style="height: 510px">
                                <table class="table table-top-campaign">
                                    <thead>
                                        <tr>
                                            <td>代码</td>
                                            <td>名称</td>
                                            <td>行业</td>
                                            <td style="color: #666">池内时间</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for record in records %}
                                            {% for scode, attr in record.items %}
                                            <tr>
                                                <td>{{ scode }}</td>
                                                <td>{{ attr.sname }}</td>
                                                <td>{{ attr.industry }}</td>
                                                <td style="color: #666">{{ attr.status }}</td>
                                            </tr>
                                            {% endfor %}
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--  END TOP CAMPAIGN-->
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <!-- END DATA TABLE-->
{% endblock %}


{% block jsscript %}
    <script>
        function filter() {
            var sourceSelect = $("#select2-source-select-container")[0].title;
            var dateSelect = $("#select2-date-select-container")[0].title;
            window.location = "/ma/?source=" + sourceSelect  + "&date=" + dateSelect;
        }
    </script>
{% endblock %}